<!doctype html>
<html class="no-js" lang="">
<!--
  当前测试案例 是用来解决ios中safaria浏览器fixed节点在滚动区域造成的bug
  问题1  fixed节点随着滚动区域滚动而滚动
  问题2   fixed节点在滚动区域滚动后层级和普通节点层级有交叉，普通节点和fixed互相重叠。
-->
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="src/icon.png">
  <link rel="stylesheet" href="./reset.css">
  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <header>
    header
  </header>
  <wrapper>
  <content>
    <inVisibleArea>
      <popover onclick="triggerPopOver()">
        这是popOver弹出层
      </popover>
    </inVisibleArea>
    <ul>
      <li class="row">中文1</li>
      <li class="row">中文2</li>
      <li class="row">中文3</li>
      <li class="row">中文4</li>
      <li class="row">中文5</li>
      <li class="row">中文6</li>
      <li class="row">中文7</li>
      <li class="row">中文8</li>
      <li class="row">中文9</li>
      <li class="row">中文10</li>
      <li class="row">中文11</li>
      <li class="row">中文12</li>
      <li class="row">中文13</li>
      <li class="row">中文14</li>
      <li class="row">中文15</li>
      <li class="row">中文16</li>
      <li class="row">中文17</li>
      <li class="row">中文18</li>
      <li class="row">中文19</li>
      <li class="row">中文20</li>
      <li class="row">中文21</li>
      <li class="row">中文22</li>
      <li class="row">中文23</li>
      <li class="row">中文24</li>
      <li class="row">中文25</li>
      <li class="row">中文26</li>
      <li class="row">中文27</li>
      <li class="row">中文28</li>
      <li class="row">中文29</li>
      <li class="row">中文30</li>
      <li class="row">中文31</li>
      <li class="row">中文32</li>
      <li class="row">中文33</li>
      <li class="row">中文34</li>
      <li class="row">中文35</li>
      <li class="row">中文36</li>
      <li class="row">中文37</li>
      <li class="row">中文38</li>
      <li class="row">中文39</li>
      <li class="row">中文40</li>
      <li class="row">中文41</li>
      <li class="row">中文42</li>
      <li class="row">中文43</li>
      <li class="row">中文44</li>
      <li class="row">中文45</li>
      <li class="row">中文46</li>
      <li class="row">中文47</li>
      <li class="row">中文48</li>
      <li class="row">中文49</li>
      <li class="row">中文50</li>
      <div class="info" onclick="triggerPopOver()">这是店铺信息</div>
    </ul>
  </content>
  </wrapper>
  <footer>

    footer
  </footer>

  <style>
    popover{
      position: fixed;
      /**
      利用translateZ 解决fixed元素跟随滚动区域一起滚动的bug
       */
      transform: translate3d(0,150%,0);
      top: auto;
      bottom: 50px;
      height: 300px;
      width: 100%;
      display: block;
      background: white;
      z-index: 1;
    }
    popover.pop{
      transform: translateY(0);
    }
    header{
      position: absolute;
      top: 0;
      height: 50px;
      background: darkred;
      width: 100%;
    }
    footer{
      position: absolute;
      bottom: 0;
      height: 50px;
      background: yellow;
      width: 100%;
    }
    wrapper{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        position: absolute;
        top: 50px;
        bottom: 50px;
        background: lightgray;
        width: 90%;
        box-sizing: content-box;
    }
    content{
      -webkit-overflow-scrolling: touch;
      height: 101%;
      overflow: auto;
      display: block;
    }
    .row{
      height: 50px;
      width: 100%;
    }
    .info{
      color: white;
      position: fixed;
      bottom: 0;
      height: 70px;
      background: black;
      width: 100%;
      /**
      利用translatez解决fixed元素跟随滚动区域一起滚动的bug
       */
      transform:translateZ(0);
    }
    li:nth-of-type(odd){ background:#00ccff;}
    li:nth-of-type(even){ background:gray;}
    ul{
      padding: 0;
      margin: 0;
    }
  </style>
  <script>
    function triggerPopOver(){
        debugger;
        var popOver = document.querySelector("popover");
        if(window.isShow){
            popOver.classList.add("pop");
            window.isShow = false;
        }else{
            popOver.classList.remove("pop");
            window.isShow = true;
        }
    }
  </script>
</body>

</html>
